<template>
  <el-col :span="24">
    <el-row class="d-flex flex-column" v-if="$route.path === '/info/account'">
      <el-col :span="24" class="flex-1" style>
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">类型</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.type" clearable placeholder="请选择迁移类型">
                <el-option label="迁入" value="迁入"></el-option>
                <el-option label="迁出" value="迁出"></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 100px;">迁移时间</label>
            <el-date-picker
              v-model="query.data.date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
            ></el-date-picker>
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-10 pl-3">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="name"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="gender"></el-table-column>
          <el-table-column label="迁移时间" width="200" align="center" prop="date"></el-table-column>
          <el-table-column label="迁移类型" width="140" align="center" prop="type"></el-table-column>
          <el-table-column label="电话号码" width="240" align="center" prop="tel"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/info/account'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/caption/resource'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">资源类型</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择资源类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-9">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="资源名称" width="340" align="center" prop="name"></el-table-column>
          <el-table-column label="位置" width="340" align="center" prop="address"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/caption/resource'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/caption/assets'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>

          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">资产类型</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择资产类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-9">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="资产名称" width="340" align="center" prop="name"></el-table-column>
          <el-table-column label="资产类型" width="340" align="center" prop="type"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/caption/assets'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-select v-model="value4" clearable placeholder="表类型" class="ml-10 pl-10">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/caption/funds'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">资金类型</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="请选择资金类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-9">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column type="index" width="80" align="center"></el-table-column>
          <el-table-column label="时间" width="120" align="center" prop="CD_Time"></el-table-column>
          <el-table-column label="资金类型" width="240" align="center" prop="C_Type"></el-table-column>
          <el-table-column label="事由" width="240" align="center" prop="CD_XiangQing"></el-table-column>
          <el-table-column label="收入" width="120" align="center" prop="CD_Income"></el-table-column>
          <el-table-column label="支出" width="120" align="center" prop="CD_Expenditure"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/caption/funds'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'CD_XiangQing')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('CD_XiangQing')"
                ></el-button>
                <el-select v-model="value4" clearable placeholder="表类型" class="ml-10 pl-10">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/caption/construction'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 80px;">补助类型</label>
            <div class="el-form-item__content">
              <el-select v-model="value4" clearable placeholder="补助类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-9">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="行政村名" width="240" align="center"></el-table-column>
          <el-table-column label="项目名称" width="240" align="center"></el-table-column>
          <el-table-column label="实施方" width="200" align="center"></el-table-column>
          <el-table-column label="验收方" width="140" align="center"></el-table-column>
          <el-table-column label="监理方" width="140" align="center"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/caption/construction'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-select v-model="value4" clearable placeholder="表类型" class="ml-10 pl-10">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-column" v-if="$route.path === '/caption/finan'">
      <el-col :span="24">
        <form class="el-form query-form el-form--label-right el-form--inline">
          <div class="el-form-item el-form-item--medium">
            <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--medium">
                <el-select v-model="value" placeholder="惠济区">
                  <el-option label="惠济区" value="惠济区" selected></el-option>
                </el-select>
              </div>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
            <div class="el-form-item__content">
              <el-select
                v-model="query.data.town"
                clearable
                placeholder="请选择想要查看的街道"
                @change="setIndex()"
              >
                <el-option
                  v-for="(town, index) in $basicMes"
                  :key="index"
                  :label="town.name"
                  :value="town.name"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.village" clearable placeholder="请选择想要查看的村">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium">
            <label for="date" class="el-form-item__label" style="width: 60px;">组</label>
            <div class="el-form-item__content">
              <el-select v-model="query.data.group" clearable placeholder="请选择想要查看的组">
                <el-option
                  v-for="(village, index) in villageAtt"
                  :key="index"
                  :label="village"
                  :value="village"
                ></el-option>
              </el-select>
            </div>
            <!---->
          </div>
          <div class="el-form-item el-form-item--medium ml-6">
            <!---->
            <div class="el-form-item__content">
              <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
              <!---->
            </div>
          </div>
          <div class="el-form-item el-form-item--medium ml-7">
            <div class="el-form-item__content">
              <create @fetch="fetch"></create>
            </div>
            <!---->
          </div>
        </form>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(225, 225, 225, 0.8)"
          ref="multipleTable"
          :data="items"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="理财名称" width="240" align="center" prop="name"></el-table-column>
          <el-table-column label="年份" width="200" align="center" prop="year"></el-table-column>
          <el-table-column label="月份" width="200" align="center" prop="month"></el-table-column>
          <el-table-column label="村" width="140" align="center" prop="vill"></el-table-column>
          <el-table-column label="编辑" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="$route.path === '/caption/finan'">
              <el-button type="primary" icon="el-icon-tickets">详情</el-button>
              <edmit :fetch="fetch" :form="form" @click="updata(scope.$index)"></edmit>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.$index, 'name')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple d-flex jc-between ai-center">
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  style="display: block;"
                  class="h-1 w-1"
                  @click="del_multip('name')"
                ></el-button>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="'http://localhost:3000/upload'"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                  :multiple="true"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                  >上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current_page"
                  :page-sizes="pagination.page_sizes"
                  :page-size="pagination.page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>  

<script>
export default {
  data() {
    return {
      model: {},
      admin: {},
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      pagination: {
        current_page: 1,
        page_sizes: [8, 9, 10, 12],
        page_size: 8,
        total: 0,
        page_length: 0,
        method: true
      },
      loading: true,
      
      dialogFormVisible: false,
      formLabelWidth: "100px",
      form: {
        //弹出框内容
      },
      query: {
        //检索对象
        method: true,
        data: {}
      },
      
      
      //序列id
      index_id: 0,
      index: 0,
      //对应村
      villageAtt: [],
      //多删数组
      delAtt: [],
      multipleSelection: [],
      //文件上传
      fileList: [],
      //删除的对象
      del_obj: {},
      delMany: {}
    };
  },

  methods: {
    setObj(obj) {
      obj.mType = this.admin.mType;
      obj.rKey = this.query.rkey || 1349;
      obj.zhenId = this.query.zhenId || 0;
      obj.villageId = this.query.villageId || 0;
      obj.startPage = this.pagination.current_page;
      obj.pageSize = this.pagination.page_size;
    },
    async get_townAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByRegionId/${this.query.rKey}`
        );
      }
      this.townAtt = res.data.data;
    },
    async get_villageAtt() {
      const res = await this.$http.get(
        `/caiwu/findzhenByZhenId/${this.query.zhenId}`
      );
      this.villageAtt = res.data.data;
    },
    async get_groupAtt() {
      const res = await this.$http.get(`/caiwu/findZu/${this.query.villageId}`);
      this.groupAtt = res.data.data;
    },
   //请求数据
    async fetch(obj) {
      this.setObj(obj);
      const res = await this.$http.post(
        "/VillageInfoSearch",
        this.Qs.stringify(obj)
      );
      this.init_items = res.data;
      this.items = res.data.data;
      this.up_pagination();
      if (
        this.$util.getCookie("current_page") !== String(this.pagination.current_page)
      ) {
        this.handleCurrentChange(this.$util.getCookie("current_page"));
      }
      if (res.status == 200) {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { CapitalDetails_Id } = item;
        att.push(CapitalDetails_Id);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },
    get_delObj() {
      let { managerId } = this.admin;
      this.del_obj = { managerId };
    },
    get_delMany() {
      let { managerId } = this.admin;
      this.delMany = { managerId };
      this.delMany.capitalDetailsId = this.delAtt;
      console.log(this.delMany);
    },
    del(index, name) {
      this.get_delObj();
      this.index_id = index;
      this.form = this.items[index];
      this.del_obj.capitalDetailsId = this.form.CapitalDetails_Id;
      this.$confirm(
        `此操作将永久删除 ${this.items[index][name]}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async index => {
          const res = await this.$http.delete(`/caiwu/deleteCapitaldetails`, {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            data: this.Qs.stringify(this.del_obj)
          });
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updata(index) {
      // alert("hahah");
      this.index_id = index;
      this.form = this.items[index];
    },

    setModel() {
      if (this.$route.path == "/caption/funds") {
        console.log(this.$http.User);
        let { mVillageid, mZhenid, mRegion, mType } = this.admin;
        this.model = { mVillageid, mZhenid, mRegion, mType };
        this.model.startPage = this.pagination.current_page;
        this.model.pageSize = this.pagination.page_size;
      }
    },
    
    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      this.get_delMany();
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除 ${str}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          console.log(".....////");
          const res = await this.$http.post(
            `/h/dd/1`,
            this.Qs.stringify({
              _method: "DELETE",
              userName: "hahah"
            })
          );

          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //选择文件
    select_file() {
      let path = this.$route.name;
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    up_pagination() {
      this.pagination.page_length = Math.ceil(
        this.init_items.count / this.pagination.current_page
      );
      this.pagination.total = this.init_items.count;
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.pagination.current_page = 1;
      this.up_table();
    },
    async handleCurrentChange(val) {
      if (this.pagination.current_page != val) {
        this.pagination.current_page = val;
        this.$util.setCookie("current_page", this.pagination.current_page);
        if (this.pagination.method) {
          this.loading = true;
          this.setModel();
          const res = await this.$http.post(
            "/caiwu/findCapitaldetails",
            this.Qs.stringify(this.model),
            {
              headers: { "Content-Type": "application/x-www-form-urlencoded" }
            }
          );
          this.items = res.data.data;
          if (res.status == 200) {
            setTimeout(() => {
              this.loading = false;
            }, 600);
          }
        } else {
          this.up_table();
        }
      }
    },
    //query
    to_query() {}
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
    this.fetch();
  }
};
</script>

<style lang="scss" scoped>
</style>
